import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ichinesereader/models/common/HelpDocItem.dart';
import 'package:ichinesereader/themes/appTheme.dart';
import 'package:ichinesereader/utils/helper.dart';
import 'package:ichinesereader/widgets/layouts/customAppBar.dart';
import '../../constants.dart';
import '../../themes/pageStyles.dart';

class HelpItemDetails extends StatefulWidget {
  const HelpItemDetails(
      {required this.helpItem, required this.localNum, Key? key})
      : super(key: key);
  final HelpDocItem helpItem;
  final int localNum;

  @override
  State<HelpItemDetails> createState() => _HelpItemDetailsState();
}

class _HelpItemDetailsState extends State<HelpItemDetails> {
  var helpDocs = <HelpDocItem>[];
  HelpDocItem currentHelpDocItem = HelpDocItem();
  String _currentTitle = '';

  @override
  void initState() {
    helpDocs = widget.helpItem.helpItems as List<HelpDocItem>;
    currentHelpDocItem = widget.helpItem;

    _currentTitle = currentHelpDocItem.title != null
        ? currentHelpDocItem.title!.en.toString()
        : '';
    if (widget.localNum == 1) {
      _currentTitle = currentHelpDocItem.title != null
          ? currentHelpDocItem.title!.cn.toString()
          : _currentTitle;
    }
    if (widget.localNum == 2) {
      _currentTitle = currentHelpDocItem.title != null
          ? currentHelpDocItem.title!.tc.toString()
          : _currentTitle;
    }

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final PageStyles _pageStyles = PageStyles();
    final isMediumScreen =
        MediaQuery.of(context).size.width > Constants.DefinedScreenMediumSize;

    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: CustomAppBar(title: widget.helpItem.title!.en.toString()),
      body: Container(
        decoration: _pageStyles.pageBoxDecoration(),
        child: isMediumScreen
            ? Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Container(
                  //   padding: EdgeInsets.symmetric(vertical: 21.0),
                  //   width: 420,
                  //   margin: EdgeInsets.symmetric(
                  //     horizontal: 12.0,
                  //     vertical: 30.0,
                  //   ),
                  //   decoration: BoxDecoration(
                  //     color: Get.isDarkMode
                  //         ? AppTheme.colors.darkTheme2
                  //         : Colors.black.withOpacity(0.1),
                  //     borderRadius: BorderRadius.circular(6.0),
                  //   ),
                  //   child: helpDocs.length > 0
                  //       ? ListView.builder(
                  //           shrinkWrap: true,
                  //           itemCount: helpDocs.length,
                  //           itemBuilder: (context, index) {
                  //              String _title = helpDocs[index].title != null
                  //                   ? helpDocs[index].title!.en.toString()
                  //                   : '';
                  //               if (widget.localNum == 1) {
                  //                 _title = helpDocs[index].title != null
                  //                     ? helpDocs[index].title!.cn.toString()
                  //                     : _title;
                  //               }
                  //               if (widget.localNum == 2) {
                  //                 _title = helpDocs[index].title != null
                  //                     ? helpDocs[index].title!.tc.toString()
                  //                     : _title;
                  //               }
                  //
                  //             return ListTile(
                  //               //need customize the selected color
                  //               selectedTileColor: Colors.black,
                  //               selectedColor: Colors.blueAccent,
                  //               leading: Container(
                  //                 padding: EdgeInsets.all(6.0),
                  //                 decoration: BoxDecoration(
                  //                   shape: BoxShape.circle,
                  //                   color: Get.isDarkMode
                  //                       ? Colors.black
                  //                       : Colors.black.withOpacity(0.1),
                  //                 ),
                  //                 child: CircleAvatar(
                  //                   radius: 15.0,
                  //                   backgroundColor: Get.isDarkMode
                  //                       ? Colors.white
                  //                       : AppTheme.colors.pinkBtn
                  //                           .withOpacity(0.8),
                  //                   child: Text(
                  //                     '${(index + 1).toString()}',
                  //                     style: TextStyle(
                  //                         color: Get.isDarkMode
                  //                             ? Colors.black
                  //                             : Colors.white),
                  //                   ),
                  //                 ),
                  //               ),
                  //               title: Text(
                  //                 //helpDocs[index].title!.en.toString(),
                  //                 _title,
                  //                 style: TextStyle(
                  //                     fontSize: 15.0,
                  //                     color: Get.isDarkMode
                  //                         ? Get.theme.primaryColorDark
                  //                         : Get.theme.primaryColorLight),
                  //               ),
                  //               onTap: () {
                  //                 setState(() {
                  //                   currentHelpDocItem = helpDocs[index];
                  //                 });
                  //               },
                  //             );
                  //           },
                  //         )
                  //       : Text('Coming soon ...'.tr),
                  // ),
                  Expanded(
                    child: Container(
                      margin: EdgeInsets.symmetric(
                          vertical: 30.0, horizontal: 12.0),
                      child: SingleChildScrollView(
                        primary: false,
                        scrollDirection: Axis.vertical,
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Container(
                                padding: EdgeInsets.all(8.0),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(30.0),
                                  color: Get.isDarkMode
                                      ? AppTheme.colors.darkTheme2
                                      : Colors.black.withOpacity(0.1),
                                ),
                                child: Container(
                                  padding: EdgeInsets.symmetric(
                                      vertical: 6.0, horizontal: 45.0),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(30.0),
                                    color: Get.isDarkMode
                                        ? AppTheme.colors.darkTheme1
                                        : AppTheme.colors.purpleBtn,
                                  ),
                                  child: Column(
                                    children: [
                                      Text(
                                        _currentTitle,
                                        style: TextStyle(
                                            letterSpacing: 1,
                                            color: Get.isDarkMode
                                                ? Get.theme.primaryColorDark
                                                : Colors.white,
                                            fontWeight: FontWeight.bold,
                                            fontSize: 18.0),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Container(
                                  margin: EdgeInsets.only(top: 21.0),
                                  padding: EdgeInsets.all(12.0),
                                  decoration: BoxDecoration(
                                    color: Get.isDarkMode
                                        ? AppTheme.colors.darkTheme2
                                        : Colors.white.withOpacity(0.3),
                                    borderRadius: BorderRadius.circular(3.0),
                                  ),
                                  child: Column(
                                    children: buildHelpCards(
                                        helpDocs, widget.localNum),
                                  ))
                            ]),
                      ),
                    ),
                  ),
                ],
              )
            : Container(
                margin: EdgeInsets.symmetric(vertical: 30.0, horizontal: 12.0),
                child: SingleChildScrollView(
                  primary: false,
                  scrollDirection: Axis.vertical,
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          padding: EdgeInsets.all(8.0),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(30.0),
                            color: Get.isDarkMode
                                ? AppTheme.colors.darkTheme2
                                : Colors.black.withOpacity(0.1),
                          ),
                          child: Container(
                            padding: EdgeInsets.symmetric(
                                vertical: 6.0, horizontal: 45.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(30.0),
                              color: Get.isDarkMode
                                  ? Colors.black
                                  : AppTheme.colors.purpleBtn,
                            ),
                            child: Column(
                              children: [
                                Text(
                                  _currentTitle,
                                  style: TextStyle(
                                      letterSpacing: 1,
                                      color: Get.isDarkMode
                                          ? Get.theme.primaryColorDark
                                          : Colors.white,
                                      fontWeight: FontWeight.bold,
                                      fontSize: 18.0),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Container(
                            margin: EdgeInsets.only(top: 21.0),
                            padding: EdgeInsets.all(12.0),
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? AppTheme.colors.darkTheme2
                                  : Colors.white.withOpacity(0.3),
                              borderRadius: BorderRadius.circular(3.0),
                            ),
                            child: Column(
                              children:
                                  buildHelpCards(helpDocs, widget.localNum),
                            ))
                      ]),
                ),
              ),
      ),
    );
  }
}
